<template>
  <div class="main-content" style="width: 1310px;">
    <div style="display: flex; align-items: flex-start; grid-gap: 10px">
<!--      侧边栏-->
      <div style="width: 150px" class="card">
        <div class="category-item" :class="{'category-item-active': item.name === current}"
             v-for="item in categoryList" :key="item.id" @click="selectCategory(item.name)"> {{item.name}}</div>

      </div>
      <!--博客列表-->
      <BlogList :categoryName="current" ref="blogListRef" style="width:879px"/>
      
      <div style="width: 260px" >
        <!--写博客-->
        <div class="card" @click="addBlog">
          <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">欢迎您！😊</div>
          <a href="/front/person"><div style="color: #666">写下博客记录美好的一天</div></a>
        </div>

        <!--文章榜单-->
        <div class="card" style="margin-top: 10px">
          <div style="display: flex; color: #666666; padding-bottom: 10px; border-bottom: 1px solid #ddd;">
            <div style="font-size: 20px; flex: 1;" >文章榜单</div>
            <div style="font-size: 12px; cursor: pointer;" @click="refreshTop"><i class="el-icon-refresh"></i> 换一批</div>
          </div>
          <div style="">
            <div  class="line1" v-for="item in showList" :key="item.id" style="margin: 10px 0">
              <a :href="'/front/blogDetail?blogId='+item.id" target="_blank">
                  <span style="width: 18px; display: inline-block; text-align: right; margin-right: 10px">
                    <span style="color: orangered" v-if="item.index === 1">{{ item.index }}</span>
                    <span style="color: goldenrod" v-else-if="item.index === 2">{{ item.index }}</span>
                    <span style="color: dodgerblue" v-else-if="item.index === 3">{{ item.index }}</span>
                    <span style="color: #666" v-else>{{ item.index }}</span>
                  </span>
                <span  style="color: #666;">{{ item.title }}</span>
              </a>
            </div>
          </div>
        </div>
        <!--活动榜单-->
        <div class="card" style="margin-top: 10px">
          <div style="display: flex; color: #666666; padding-bottom: 10px; border-bottom: 1px solid #ddd;">
            <div style="font-size: 20px; flex: 1;" >活动榜单</div>
            <div style="font-size: 12px; cursor: pointer;" @click="refreshActivityTop"><i class="el-icon-refresh"></i> 换一批</div>
          </div>
          <div style="">
            <div  class="line1" v-for="item in showActivityList" :key="item.id" style="margin: 10px 0">
              <a :href="'/front/activityDetail?activityId=' + item.id" target="_blank">
                <span style="width: 18px; display: inline-block; text-align: right; margin-right: 10px">
                  <span style="color: orangered" v-if="item.index === 1">{{ item.index }}</span>
                  <span style="color: goldenrod" v-else-if="item.index === 2">{{ item.index }}</span>
                  <span style="color: dodgerblue" v-else-if="item.index === 3">{{ item.index }}</span>
                  <span style="color: #666" v-else>{{ item.index }}</span>
                </span>
                <span  style="color: #666;">{{ item.name }}</span>
              </a>
            </div>
          </div>
        </div>
        <!--活动图片榜单链接-->
        <div style="margin-bottom: 10px; margin-top: 10px">
          <div v-for="item in topActivityList.slice(0,4)" :key="item.id" style="margin-bottom: 10px">
            <a v-if="item.cover" :href="'/front/activityDetail?activityId=' + item.id" target="_blank"><img :src="item.cover" alt="" style="width: 100%; border-radius: 5px"></a>
          </div>
        </div>
        <!--推荐-->
      </div>
    </div>
<!--    <dibuBAH></dibuBAH>-->
  </div>
</template>

<script>
import dibuBAH from "@/components/dibuBAH.vue";
import Search from "@/components/Search.vue";
import BlogList from "@/components/BlogList.vue";

export default {

  data() {
    return {
      current: '全部博客',
      categoryList: [],
      topList: [],
      showList: [],
      lastIndex: 0,
      topActivityList: [],
      showActivityList: [],
      activityLastIndex: 0,
    }
  },
  mounted() {
    this.load()
    this.refreshTop()
    this.refreshActivityTop()
  },
  components: {
    dibuBAH,
    BlogList,
  },
  // methods：本页面所有的点击事件或者其他函数定义区
  methods: {
    //写博客函数
    addBlog(){
      window.open("/front/newBlog");
    },
    refreshActivityTop(){
      this.$request.get('/activity/selectTop').then(res => {
        //后台分页传数据
        this.topActivityList = res.data || []
        // 为对应的榜单添加一个index表示其热榜排名
        let i = 1
        this.topActivityList.forEach(item => item.index = i++)
        //showList是展示的数据list
        if(this.activityLastIndex >= this.topActivityList.length || this.activityLastIndex >=20){
          this.activityLastIndex = 0
        }
        this.showActivityList = this.topActivityList.slice(this.activityLastIndex,this.activityLastIndex+5)  //0-5  5-10
        this.activityLastIndex += 5
      })
    },
    refreshTop(){
      this.$request.get('/blog/selectTop').then(res => {
        //后台分页传数据
        this.topList = res.data || []
        // 为对应的榜单添加一个index表示其热榜排名
        let i = 1
        this.topList.forEach(item => item.index = i++)
        //showList是展示的数据list
        if(this.lastIndex >= this.topList.length || this.lastIndex >= 20){
          this.lastIndex = 0
        }
        this.showList = this.topList.slice(this.lastIndex,this.lastIndex+5)  //0-5  5-10
        this.lastIndex += 5
      })
    },
    selectCategory(categoryName){
      this.current = categoryName  //点击博客分类给该量赋值
      //this.loadBlogs(1)  //切换重新刷新
      //this.$refs.blogListRef.loadBlogs(1)   //调用组件中的函数
    },
    load() {
      this.$request.get('/category/selectAll').then(res => {
        this.categoryList = res.data || []
        this.categoryList.unshift({name: '全部博客'})
      })
    //   请求博客数据
    },

  }
}
</script>
<style >
.category-item {
  text-align: center;
  padding: 10px 0;
  font-size: 16px;
  cursor: pointer;
}
.category-item-active {
  background-color: #e56c3c;
  color: white;
  border-radius: 10px;
}
.line1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body{
  min-height: 100vh;
}
</style>
